<script setup lang="ts">
import {ref} from 'vue'
const value=ref()
const active=ref(0)

</script>

<template>
  <div class="article-page">
    <cp-nav-bar title="健康百科"></cp-nav-bar>
    <div class="seach">
        <van-search shape="round" v-model="value" placeholder="搜索医生、疾病、健康百科" />
    </div>
    <div class="banner">
      <img src="@/assets/ad.png" alt="">
    </div>
    <div class="shortcut">
      <van-grid :border="false">
        <van-grid-item icon="photo-o" text="文字" v-for="item in 8" />
      </van-grid>
    </div>
    <div class="tab">
      <van-tabs v-model:active="active" shrink sticky>
        <van-tab title="推荐">内容 1</van-tab>
        <van-tab title="关注">内容 2</van-tab>
      </van-tabs>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.article-page{
  padding-bottom: 50px;
  .seach{
    margin-top: 46px;
    :deep(.van-icon){
      font-size: 18px;
    }
  }
  .banner{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    img{
      width: 95%;
    }
  }
  .shortcut{
    margin-top: 10px;
  }
}
</style>
